<?xml version="1.0" encoding="UTF-8"?>
<!--
    JBoss, Home of Professional Open Source
    Copyright 2015, Red Hat, Inc. and/or its affiliates, and individual
    contributors by the @authors tag. See the copyright.txt in the
    distribution for a full listing of individual contributors.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->
<!-- This is a partial, and is templated by AngularJS -->
<div>
    <h1>Welcome to JBoss!</h1>

    <div>
        <p>You have successfully deployed a Jakarta EE Enterprise
            Application.</p>
    </div>

    <!-- Standard HTML form, with the submit function bound to the register() function defined in the controller -->
    <form name="regForm" ng-submit="register()">
        <h2>Member Registration</h2>
        <fieldset>
            <legend>Register a member:</legend>
            <!-- Each input is bound to a property on the prototype newMember object -->
            <div>
                <label for="name">Name:</label>
                <input type="text" name="name" id="name"  ng-model="newMember.name" placeholder="Your Name" required autofocus/>
                <span class="error" ng-show="regForm.name.$error.required">required</span>
                <span class="error" ng-show="errors.name">{{errors.name}}</span>
            </div>
            <div>
                <label for="email">Email:</label>
                <input type="email" name="email" id="email" ng-model="newMember.email" placeholder="Your Email" required/>
                <span class="error" ng-show="regForm.email.$error.required">required</span>
                <span class="error" ng-show="regForm.email.$error.email">not a valid email</span>
                <span class="error" ng-show="errors.email">{{errors.email}}</span>
            </div>
            <div>
                <label for="phoneNumber">Phone #:</label>
                <input type="tel" name="phoneNumber" id="phoneNumber" ng-model="newMember.phoneNumber" ng-pattern="/^[0-9]{10,12}$/" placeholder="Your Phone #" required/>
                <span class="error" ng-show="regForm.phoneNumber.$error.required">required</span>
                <span class="error" ng-show="regForm.phoneNumber.$error.pattern">must be between 10 and 12 digits</span>
                <span class="error" ng-show="errors.phoneNumber">{{errors.phoneNumber}}</span>
            </div>
            
            <!-- We output a list of success messages (appropriately styled!) for the form. -->
            <ul ng-hide="!successMessages" class="success">
                <li ng-repeat="message in successMessages">{{message}}</li>
            </ul>

            <!-- Output the list of error messages if any. -->
            <ul ng-hide="!errorMessages" class="error">
                <li ng-repeat="message in errorMessages">{{message}}</li>
            </ul>

            <!-- There are two buttons, the default submit action (which is bound for the whole form), and a reset button, that clears the form. -->
            <div>
                <input type="submit" ng-disabled="regForm.$invalid" id="register" value="Register" />
                <input type="button" ng-click="reset()" name="cancel"
                    id="cancel" value="Cancel" />
            </div>
        </fieldset>
    </form>

    <!-- A list of registered members -->
    <h2>Members</h2>
    <!-- If there are no members registered, instead of showing the table, we show a simple message. -->
    <em ng-show="members.length == 0">No registered members.</em>
    <table ng-hide="members.length == 0" class="simpletablestyle">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone #</th>
                <th>REST URL</th>
            </tr>
        </thead>
        <!-- The table is built using the AngularJS repeat function, iterating over the members variable, and ordering by the property specified in the orderBy variable -->
        <tr ng-repeat="member in members | orderBy:orderBy">
            <td>{{member.id}}</td>
            <td>{{member.name}}</td>
            <td>{{member.email}}</td>
            <td>{{member.phoneNumber}}</td>
            <td><a href="rest/members/{{member.id}}">/rest/members/{{member.id}}</a>
            </td>
    </table>
    <div>
        REST URL for all members: <a href="rest/members">/rest/members</a>
    </div>
    <div>
        <!-- The table has a button to manually refresh the values, in case, for example, someone else adds a member -->
        <input type="button" ng-click="refresh()" name="refresh"
            id="refresh" value="Refresh" />
    </div>
</div>
